<template>
  <a-spin :spinning="spinning">
    <div class="bg" :style="curbg">
      <div
        style="
          width: 100%;
          height: 172px;
          display: flex;
          justify-content: space-between;
          padding: 0 130px;
          align-items: center;
        "
      >
        <div style="flex-shrink: 0; min-width: 473px">
          <img
            style="
              margin-right: 10px;
              background: rgb(255, 255, 255);
              width: 357px;
              padding: 5px 20px 5px 5px;
              border-radius: 10px;
            "
            src="@/assets/conference/logo.png"
          />
        </div>
        <div v-if="!isBig" class="info-title my_text_1">
          {{ $route.query.name }}
        </div>
        <div style="flex-shrink: 0; font-size: 38px; text-align: right; color: #333">
          {{ currentTime }}
          <!-- <h3>{{ currentTime }}</h3> -->
        </div>
        <!-- <a
          class="back"
          @click="handleClose"
        /> -->
        <!-- <div class="info-title">
          <div style="display: flex;">
            <img
              style="margin-right: 10px;background: rgb(255, 255, 255);width: 300px;padding: 5px 20px 5px 5px;border-radius: 10px;"
              src="../../../../../src/assets/conference/logo.png"
            >
            <h3>会议室名称</h3>
          </div>
          <h3>{{ currentTime }}</h3>
        </div> -->
      </div>
      <div class="box">
        <!-- <div v-if="!isBig" class="info-title">
          {{ $route.query.name }}
        </div> -->

        <template>
          <div class="info-head">
            <div style="flex: 1">会议时间</div>
            <div v-if="isBig" style="flex: 1">会议室</div>
            <div style="flex: 1">会议主题</div>
            <div style="flex: 1">预约部门</div>
          </div>
          <div ref="content" class="content-box">
            <template v-if="listData.length == 0">
              <div class="noData1">
                {{ !isBig ? '当前会议室近日暂无会议预定' : '近日暂无会议预定' }}
              </div>
            </template>
            <vue-seamless-scroll
              v-else
              :data="listData"
              :style="{ height: conHeight + 'px' }"
              class="warp"
              :class-option="classOption"
            >
              <ul class="item">
                <li v-for="(item, index) in listData" :key="index">
                  <div style="display: flex; flex: 1; align-items: center">
                    <div style="flex: 1">
                      <div>
                        <template
                          v-if="
                            item.startTime &&
                            item.endTime &&
                            item.startTime.split(' ')[0] === item.endTime.split(' ')[0]
                          "
                        >
                          <div>{{ formatDate(item.startTime) }}</div>
                          <span>{{ item.startTime.split(' ')[1] + '-' + item.endTime.split(' ')[1] }}</span>
                        </template>
                        <template v-else>
                          <div>{{ item.startTime }}</div>
                          <div style="line-height: 0.1">~</div>
                          <div>{{ item.endTime }}</div>
                        </template>
                        <span v-if="isOnGoing(item.startTime, item.endTime)">(进行中)</span>
                      </div>
                    </div>
                    <div class="my_text_2" v-if="isBig" style="flex: 1">
                      {{ item.meetingRoom && item.meetingRoom.name }}
                    </div>
                    <div class="my_text_2" style="flex: 1">
                      {{ item.meetingName }}
                    </div>
                    <div class="my_text_2" style="flex: 1">
                      {{ item.reserveDeptName }}
                    </div>
                  </div>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </template>
      </div>
      <!-- <div style="overflow: hidden; width: 80%">
        <p class="back" @click="handleClose">返回</p>
      </div> -->
    </div>
  </a-spin>
</template>
<script>
import moment from 'moment'
import vueSeamlessScroll from 'vue-seamless-scroll'
import { reservationProjection } from '@/api/office/anualConference/index'
const interval = null
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      contentHeight: 600,
      nowTime: new Date(), // this.$dateFormat(new Date(), 'S'),
      timeinterval: null,
      listinterval: null,
      spinning: false,
      listData: []
    }
  },
  computed: {
    conHeight() {
      return this.contentHeight
    },
    currentTime() {
      return moment(this.nowTime).format('YYYY年MMMDo a h:mm:ss')
    },
    isBig() {
      return !this.$route.query.name
    },
    isOnGoing() {
      return (start, end) => {
        let curDate = new Date(),
          beginDate = new Date(start),
          endDate = new Date(end)
        if (curDate >= beginDate && curDate <= endDate) {
          return true
        }
        return false
      }
    },
    classOption() {
      const limitMoveNum = (this.conHeight / 152).toFixed(0)
      return {
        // step: 0.8, // 数值越大速度滚动越快
        limitMoveNum: limitMoveNum, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 152, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    },
    curbg() {
      return {
        backgroundImage: 'url(' + require('@/assets/conference/conBg2.jpg') + ')',
        backgroundSize: 'cover',
        backgroundPosition: 'center center'
      }
      // this.isBig
      //   ? {
      //       backgroundImage: 'url(' + require('@/assets/conference/conBg2.jpg') + ')',
      //       backgroundSize: 'inherit',
      //       backgroundPosition: 'center center'
      //     }
      //   : {
      //       background: 'url(' + require('@/assets/conference/conBg2.jpg') + ')',
      //       backgroundPosition: 'center center',
      //       backgroundSize: 'inherit'
      //     }
    }
  },
  created() {
    this.timeinterval = setInterval(() => {
      // let icnow = new Date();
      this.nowTime = new Date() //this.$dateFormat(icnow, 'S')
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timeinterval)
    clearInterval(this.listinterval)
  },
  mounted() {
    // if (this.$route.query.unitId && this.$route.query.id) {
    this.getScreen()
    // }
    setTimeout(() => {
      this.$nextTick(() => {
        this.listinterval = setInterval(() => {
          this.getScreen()
        }, 1000 * 60)
      })
    })
  },
  methods: {
    moment,
    // 转义日期
    formatDate(time) {
      let date = time?.split(' ')[0]
      return date === this.$dateFormat(new Date(), 'D') ? '今日' : date
    },
    getScreen() {
      this.spinning = true
      const param = {
        needCount: true,
        pageNo: 0,
        pageSize: 1000,
        query: this.$route.query
      }
      reservationProjection(param)
        .then((res) => {
          this.spinning = false
          if (res.code === 200) {
            this.listData = res.data || []
            this.$nextTick(() => {
              if (this.$refs.content) this.contentHeight = this.$refs.content.offsetHeight
            })
          }
        })
        .catch(() => {
          this.spinning = false
        })
    },
    handleClose() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.info-title {
  text-align: center;
  color: #fff;
  letter-spacing: 3px;
  font-size: 48px;
  font-weight: 500;
  height: 140px;
  line-height: 140px;
  text-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  // border-bottom: 1px solid #f2f2f2;
}
.info-head {
  display: flex;
  height: 152px;
  line-height: 152px;
  font-size: 38px;
  font-weight: 500;
  text-align: center;
  color: #fff;
  background-color: #315072;
  // border: 1px solid #f2f2f2;
  // border-bottom: 1px solid #f2f2f2;
  // border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.noData1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  font-size: 100px;
  color: #3aabeb;
}
.noData2 {
  flex: 1;
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 110px;
  color: rgb(255, 255, 255);
  justify-content: center;
  p {
    flex: 1;
    text-decoration: underline;
    text-underline-offset: 40px;
  }
}
.content-box {
  flex: 1;
  // border:1px solid #F2F2F2;
  overflow: hidden;
  position: relative;
  color: #fff;
  background-color: #fff;
  text-align: center;
  font-weight: 500;
}
.seamless-warp {
  height: 550px;
  overflow: hidden;
}
.warp {
  height: 550px;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    li,
    a {
      // border-bottom: 1px solid rgba(255, 255, 255, 0.5);
      display: block;
      color: #3aabeb;
      min-height: 152px;
      // line-height: 130px;
      display: flex;
      justify-content: space-between;
      font-size: 38px;
      overflow: hidden;
    }
    li:nth-child(even) {
      background-color: #e6ecf2;
    }
  }
}
.bg {
  // position: relative;
  // display: flex;
  // flex-flow: column;
  // justify-content: center;
  // align-items: center;
  height: var(--heightVh);
  width: var(--widthVw);
  font-size: 0;
  overflow: hidden;
  // background: url('~@/assets/conference/conBg1.png') center center;
  background-size: cover;
  .box {
    // background-image: radial-gradient(50% 150%, rgba(0, 0, 0, 0) 20%, #000000 100%);
    // background-image: radial-gradient(at 50% 150%,transparent 0,#000 100%);
    // background-image: radial-gradient(at 50% 50%, transparent 0, rgba(0, 0, 0, 0.4) 100%);
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    width: 100%;
    height: calc(100% - 172px);
    // margin: 0px 1.25rem;
    // margin-top: 6rem;
    // padding: 1.25rem;
    position: relative;
    display: flex;
    flex-flow: column;
    h3 {
      font-family: PingFangSC-Semibold;
      font-size: 24px;
      color: #ffffff;
      letter-spacing: 0;
      // width: 1100px;
      // position: absolute;
      // left: 100px;
      // top: 50px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 10px;
      margin-bottom: 0;
    }
  }
  .back {
    display: inline-block;
    font-size: 24px;
    margin: 0;
    color: #fff;
    width: 90px;
    height: 42px;
    float: right;
    cursor: pointer;
    background: url('~@/assets/back.png') center center;
    background-position-x: right;
    background-repeat: no-repeat;
    // position: absolute;
    // top: 0px;
    // right: 10px;
  }
}
.my_text_1,
.my_text_2 {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
}
.my_text_1 {
  -webkit-line-clamp: 1;
  -moz-line-clamp: 1;
  line-clamp: 1;
}
.my_text_2 {
  -webkit-line-clamp: 2;
  -moz-line-clamp: 2;
  line-clamp: 2;
}
</style>